<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="first" style="width: 800px;height:600px;"></div>
<script type="text/javascript" src="../bootstrap/vue.js"></script>
<script type="text/javascript" src="../bootstrap/jquery3.6.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../bootstrap/my.js"></script>
<script type="text/javascript" src="../bootstrap/echarts.min.js"></script>
<script>
    var dom = document.getElementById("first");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        title : {
            text: '库存数量记录',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:[]
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'',
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[]
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
    var names=[];//定义两个数组
    var nums=[];
    var conuts=[];
    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
        $.ajax({
            type: "post",
            url: "../Matter/selMatterInfoItemsInfoNo1",
            dataType: "json",
            async: false,
            success: function (result) {
                result=result.list;
                if (result) {
                    for (var i = 0; i < result.length; i++) {
                        names.push(result[i].itemsTypeName);    //挨个取出类别并填入类别数组
                        var obj = new Object();
                        obj.name = result[i].itemsTypeName;
                        obj.value = result[i].itemsCounts
                        nums.push(obj);  //挨个取出销量并填入销量数组
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        legend: {
                            data: names
                        },
                        series: {
                            // 根据名字对应到相应的系列
                            name: ['数量'],
                            data: nums
                        }
                    });
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });



</script>
</body>
</html>